<template>

    <div class="common-layout">
        <el-container>
            <el-header style="border-style: groove; border-width: 2px ; width: 1200px;height:84px ">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    style="width: 1095px;height:80px;right: 20px;">
                    <el-menu-item index="1">爱吃兔集团有限公司</el-menu-item>

                    <el-menu-item index="3" style="left: 610px;">登录人</el-menu-item>
                    <el-menu-item index="4" @click="exit()" style="left: 630px;">退出登录</el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside
                    style="border-style: groove; border-width: 2px;width: 200px;height: 617px; ;margin-top: 10px;">
                    <el-col>
                        <el-menu class="el-menu-vertical-demo" default-active="2" @open="handleOpen"
                            @close="handleClose">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <location />
                                    </el-icon>
                                    <span>溯源管理</span>
                                </template>
                                <el-sub-menu index="1-1">
                                    <template #title>溯源管理</template>
                                    <el-menu-item index="1-1-1" @click="Show()">溯源管理--新增</el-menu-item>
                                    <el-menu-item index="1-1-2">溯源管理--导出</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="1-2">
                                    <template #title>溯源管理--养殖</template>
                                    <el-menu-item index="1-2-1">溯源管理--养殖信息</el-menu-item>
                                    <el-menu-item index="1-2-2">溯源管理--企业信息</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="1-3">
                                    <template #title>溯源管理--屠宰</template>
                                    <el-menu-item index="1-3-1">溯源管理--深加工</el-menu-item>
                                    <el-menu-item index="1-3-2">溯源管理--供应商</el-menu-item>
                                    <el-menu-item index="1-3-3">溯源管理--企业信息</el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <location />
                                    </el-icon>
                                    <span>商品溯源</span>
                                </template>
                                <el-sub-menu index="2-1">
                                    <template #title>溯源管理</template>
                                    <el-menu-item index="2-1-1">溯源管理--更多图片</el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>
                        </el-menu>
                    </el-col>
                </el-aside>
                <el-main style="border-style: groove; border-width: 2px;margin-top: 10px;margin-left: 5px; ">
                    <el-button type="success" style="margin-bottom: 10px;" @click="logic.isOpen = true">增加</el-button>
                    <el-table :data="teee" border style="width: 100%;height: 500px;">
                        <el-table-column type="index" width="55" label="序号" />
                        <el-table-column prop="goodsId" label="生产名称" />
                        <el-table-column prop="productionbatches" label="生产批次" />
                        <el-table-column prop="shelflifeDay" label="保质期（天）" />
                        <el-table-column prop="productionlicense" label="生产许可证" />
                        <el-table-column prop="productionCompany" label="生产企业" />
                        <el-table-column label="操作">
                            
                            <template v-slot="scope">
                                <el-button type="danger" @click="del(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-model:current-page="from.pageIndex" v-model:page-size="from.pageSize"
                        :page-sizes="[7, 15, 20]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="from.recordCount" />
                </el-main>
            </el-container>
        </el-container>
    </div>
    <div>
        <el-dialog v-model="logic.isOpen" title="基本信息" width="500">
            <el-form :model="consid" width-label="200px">
                <!-- <el-form-item label="商品名称: ">
                    <el-select v-model="form.region" placeholder="Please select a zone">
                        <el-option label="Zone No.1" value="shanghai" />
                        <el-option label="Zone No.2" value="beijing" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="商品名称: ">
                    <el-input v-model="consid.goodsId" />
                </el-form-item>
                <el-form-item label="生产批次: ">
                    <el-input v-model="consid.productionbatches" />
                </el-form-item>
                <el-form-item label="保质期（天）: ">
                    <el-input v-model="consid.shelflifeDay" />
                </el-form-item>
                <el-form-item label="生产许可证号: ">
                    <el-input v-model="consid.productionlicense" />
                </el-form-item>
                <el-form-item label="生产企业: ">
                    <el-input v-model="consid.productionCompany" />
                </el-form-item>
                <el-form-item label="封面图: " prop="coverimage">
                    <!--上传图片-->
                    <el-upload class="avatar-uploader" action="https://localhost:62301/api/Trance/UploadImages"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="consid.coverimage" :src="consid.coverimage" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="logic.isOpen = false">Cancel</el-button>
                    <el-button type="primary" @click="addTrace()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from "@/stores/counter"
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'


const router = useRouter()
//aside
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
//main
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
//分页
const from = reactive({
    pageIndex: 1,
    pageSize: 7,
    recordCount: 1,
    pageCount: 1
})
//上传图片
const consid = reactive({
    goodsId: "",
    productionbatches: "",
    shelflifeDay: "",
    productionlicense: "",
    productionCompany: "",
    coverimage: "",
})
const logic = reactive({
    isOpen: false,
})


//#region 上传图片
//上传图片
const handleAvatarSuccess = (response: any) => {
    consid.coverimage = 'http://localhost:62301/api/Trance/UploadImages' + response.filename;
    console.log(consid.coverimage);
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' || rawFile.type !== 'image/jpeg') {
        ElMessage.error('必须是JPG格式或者PNG格式!');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 4) {
        ElMessage.error('大小不能超过4MB!');
        return false;
    }
    return true;
};


//表格显示
const teee = <any>ref([])
const Gettable = () => {
    axios.get("http://localhost:42960/api/User/TranceShow", {
        params: {
            pageIndex: from.pageIndex,
            pageSize: from.pageSize
        }
    }).then(res => {
        teee.value = res.data.data.list

        from.recordCount = res.data.data.recordCount
        from.pageCount = res.data.data.pageCount
    })
}

//退出登录
const exit = () => {
    router.push("/")
}

//显示
const Show = () => {
    router.push("/Show")
}
//添加
const addTrace = () => {
    axios.post("http://localhost:62301/api/Trance/AddTrance", consid).then(res => {
        if (res.data.code == 300) {
            ElMessage.success(res.data.message)
            Gettable()
            logic.isOpen = false
        }
        else {
            ElMessage.error(res.data.message)
            return
        }
    })
}
//删除
const del = (row: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("http://localhost:62301/api/Trance/DelTrance", row).then(res => {
                if (res.data.code == 400) {
                    ElMessage.success(res.data.message)
                    Gettable()
                }
                else {
                    ElMessage.error(res.data.message)
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}

watch(from, () => {
    Gettable()
})

onMounted(() => {
    Gettable()

})
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>